<template>
  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="100%" @ok="handleSubmit">

    <div>
      <span style="margin-right: 5px">{{dataList.cheJianName}}</span> <span class="top_title">{{dataList.type==1?'正常班':'连班'}}</span>
      <span class="top_title">{{dataList.shangwuUpTxt}}</span>
      <span class="top_title">{{dataList.shangwuDownTxt}}</span>
      <span class="top_title">{{dataList.xiawuUpTxt}}</span>
      <span class="top_title">{{dataList.wanshangUpTxt}}</span>
      <span class="top_title">{{dataList.wanshangDownTxt}}</span>
      <span class="top_title">{{dataList.remark}}</span>

    </div>
    <vxe-grid ref="tableRef" v-bind="gridOptions" style="height: 500px;">
      <template #toolbar_buttons>
        <Button type="primary" @click="handleCreate">新增车间小组考勤规则</Button>
      </template>
      <template #action="{ row }">
        <TableAction outside :actions="[
           {
              label:'删除',
              color: 'error',
              loading: row.loading,
              popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, row),
                },
             },
        ]
        " />
      </template>

    </vxe-grid>
    <addModal @register="addDrawer[0]" @success="handleSuccess"></addModal>
  </BasicDrawer>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive} from 'vue';
import { BasicForm, useForm, ApiSelect } from '@/components/Form';
import {BasicDrawer, useDrawer, useDrawerInner} from '@/components/Drawer';
import {vxeTableColumns, vxeTableFormSchema} from '../dept/role.data';
import addModal from './addModal.vue';

import {
  groupRuleList,
  kqDeptRemove,
  removeGroupRule,
  settingGroupRule
} from '@/api/heng/production';
import { useMessage } from "@/hooks/web/useMessage";
import { useUserStore } from "@/store/modules/user";
import {BasicTableProps, VxeGridInstance, VxeTableDefines} from "@/components/VxeTable";

import {Button, Descriptions, DescriptionsItem, Modal} from "ant-design-vue";
import {TableAction} from "@/components/Table";
import util from "@/utils/util";
import {formSchema} from "./role.data";
const userStore = useUserStore();

const addDrawer = useDrawer();
const applyViewShow = ref(false);

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const dataList = ref({});
const { createMessage } = useMessage();

const id = ref("");

const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: vxeTableColumns,
  filterConfig: {
    remote: true,
  },
  exportConfig:{},
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    // enabled: true,
    items: vxeTableFormSchema,
  },
  pagerConfig: {
    pageSize: 20,
  },
  proxyConfig: {
    props: {
      result: 'data.list',
      list: 'data.list',
      total: 'data.totalResult',
      message: 'message',
    },
    filter: true,
    ajax: {
      query: ({ page, form, filters }) => {
        return findPageList(page, form, filters);
      },
    },
  },
});

function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
  let json = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      json[field] = value;
    });
  }
  return groupRuleList({
    page: page.currentPage,
    pageSize: page.pageSize,
    ruleId:id.value,
    ...form,
    ...json,
  });
}


const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  //打开弹层后的回调
  setDrawerProps({ confirmLoading: false });

  isUpdate.value = !!data?.isUpdate;
  id.value = data.id
  dataList.value=data;
  if (unref(isUpdate)) {
  } else {
   

  }
  tableRef.value.commitProxy('reload');

});



const getTitle = computed(() => (!unref(isUpdate) ? '车间小组考勤规则' : '车间小组考勤规则'));

async function handleSubmit() {
  try {
    // let t_list = tableRef.value.getTableData().tableData;
    // values.items = t_list;
    setDrawerProps({ confirmLoading: true });
    // TODO custom api


  } finally {
    setDrawerProps({ confirmLoading: false });
  }
}

function createFn(values) {
  let json={
    deptIds:values.deptId,
    ruleId:id.value,
  }
  settingGroupRule(json).then((res) => {
    // console.log("---res::",res)
    if (res.code == 200) {
      createMessage.success(res.message);
      tableRef.value.commitProxy('reload');
    } else {
      createMessage.error(res.message);
    }
  })
    .catch((res) => {
      createMessage.error(res.message);
    })
    .finally(() => {
      // closeDrawer();
      emit('success');
    });
}

function handleDelete(record: Recordable) {
  record.loading = true;
  removeGroupRule({id:record.groupRuleId}).then(res => {
    if(res.code === 200) {
      record.loading = false;
      tableRef.value.commitProxy('reload');
    }else {
      createMessage.error(res.message);
    }
  }).finally(()=>{
    record.loading = false;
  });
}

function handleCreate() {
  addDrawer[1].openDrawer(true, {
    isUpdate: false,
  });
}

function handleSuccess(v){
  createFn(v)
}

</script>
<style scoped lang="less">
.top_title{
  margin-left: 5px;
}
</style>
